<template>
  <div class="login">
    <el-form :model="UserInfo" label-width="120px">
      <el-form-item label="邮箱">
        <el-input v-model="UserInfo.email"/>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="UserInfo.password" type="password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
      </el-form-item>
      <el-form-item>
        <router-link to="/register">没有账号？去注册</router-link>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import axios from "@/utils/request"
import {User,User_Info} from '@/types'
import {set} from '@/utils/storage'
import router from '@/router'

import {useUserStore} from '@/store/user'
const userStore = useUserStore()
const { setUser } = userStore

const UserInfo = ref<User>({
  "email": "",
  "password": ""
})

const userinfo_rsp = ref<User_Info>(  {
  "id": 0,
  "email": "",
  "username": "",
  "bio": '',
  "image": "",
  "token": ""
})

const login = function () {
  axios.post('/users/login',{
  "user":UserInfo.value
}).then(res=>{
  userinfo_rsp.value = res.data.user
  setUser(userinfo_rsp.value)
  set('user_token', userinfo_rsp.value.token)
  //跳转到主页
  router.push({name:'home'})
  console.log(res.data)
})
}

</script>

<style scoped>

.login {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40%;
  height: 100%;
}
</style>